<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" name=“viewport” content=“viewport-fit=cover” />
		<title></title>
	</head>
	<style>
		body{
			margin: 0;
			padding: 0;
		}
		.img_wrap {
			width: 61.2rem;
			background: #ccc;
		}

		.img_box {
			width: 61.2rem;
			margin: auto;
			position: relative;
		}

		.img_wrap img {
			width: 61.2rem;
		}

		.form {
			position: absolute;
			top: 242.6rem;
			left: 7.5rem;
		}

		.form .div {
			outline: none;
			border-radius: 0.7rem;
			border: none;
			font-size: 1.9rem;
			margin-bottom: 2rem;
			text-indent: 1.25rem;
			width: 46.2rem;
			height: 5.67rem;
			line-height: 5.67rem;
			background: #FFFFFF;
			color: rgb(118, 118, 118);
			position: relative;
			overflow: hidden;
		}
		.form .div .input {
	     position: absolute;
			outline: none;
			border: none;
			width: 46.2rem;
			height: 5.67rem;
			font-size: 1.9rem;
			text-indent: 1.25rem;
			top: 0;
			left: 0;
			z-index: 66;
		}
		.form .div .span {
			position: absolute;
			top: 0;
			left: 0;
		}

		.form .div .full {
			opacity: 1;
			z-index: 66;
		}

		.form button {
			width: 22rem;
			height: 6.1rem;
			outline: none;
			border-radius: 0.9rem;
			border: none;
			font-size: 3rem;
			margin-bottom: 1.53rem;
			margin-top: 1.2rem;
			margin-left: 11.5rem;
			background-color: rgb(247, 22, 2);
			color: #fff;
		}

		.form input radio {
			outline: none;
			border-radius: 0.6rem;
			border: none;
			font-size: 1.8rem;
			margin-bottom: 1.3rem;
			text-indent: 1.25rem;
		}

		input[type=date]::-webkit-datetime-edit {
			background: #fff;
		}

		.textr {
			margin-top: 6.2rem;
			width: 47rem;
			height: 15.3rem;
			background-color: rgb(191, 13, 0);
			border-radius: 0.6rem;
		}
		.form select{
			outline: none;
			border-radius: 0.7rem;
			border: none;
			font-size: 1.9rem;
			margin-bottom: 1.28rem;
			text-indent: 1.25rem;
			width: 46.4rem;
			height: 6.1rem;
			background: #FFFFFF;
			position: absolute;
			top: 0;
			left: 0;
		}
		.textr{
			color: #FFFFFF;
			font-size: 2.5rem;
			text-align: center;
			overflow: auto;
		}
		input[name="arrTime"]:before{
			color:darkgray;content:attr(placeholder);
		}
		input[name="arrTime"].full:before {
			color:black;content:""!important;
		}
		#nullq{
			margin-top: 5rem;
		}
		#listjss{
				background: #fff;
		}
		
	</style>
	<div class="img_wrap">
		<div class="img_box">
			<img src="img/2.jpg" />
			<div class="form">
				<form method="post" onsubmit="return false" action="##" id="formtest">
					<div class="div">
						<input name="company" placeholder="协会名称" class="input" />
					</div>
					<div class="div">
						<input name="name" placeholder="参会人员" class="input" />
					</div>
					<div class="div">
						<input name="job" placeholder="所任职务" class="input" />
					</div>
					<div class="div" name="mobile">
						<input name="mobile" placeholder="联系电话" class="input" />
					</div>
					<div class="div">
						<input name="arrTime" id="listjss" placeholder="时间" type="time" class="input" />
					</div>
					<div class="div" placeholder="住宿需求" list="list">
						<input name="zs" id="zs" style="width: 0rem; height: 0rem; opacity: 0;" />
						<select id="list">
							<option value="请选择">请选择住宿需求</option>
							<option value="需求住宿">需要住宿</option>
							<option value="不需要住宿">不需要住宿</option>
						</select>
					</div>
					<div class="div" placeholder="接送需求" list="listjs">
						<input name="js" id="js" style="width: 0rem; height: 0rem; opacity: 0;" />
						<select id="listjs">
							<option value="请选择">请选择接送需求</option>
							<option value="需求接送">需要接送</option>
							<option value="不需要接送">不需要接送</option>
						</select>
					</div>
					<button type="" id="sub">提&nbsp&nbsp交</button>
				</form>
				<div class="textr">
				</div>
			</div>
		</div>
	</div>
	</body>
	<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery.serializeJSON/3.2.1/jquery.serializejson.min.js"></script>
	<script>
		copyText();
		$('#sub').click(function() {
			$.ajax({
				type: "POST",
				url: "https://api.ddbyz.com/yy-api/yypc/djkxh/saveOne",
				data: JSON.stringify($('#formtest').serializeJSON()),
				dataType: "json",
				contentType: "application/json",
				success: function(res) {
					if (res.code == 1) {
						alert(res.msg)
						window.location.reload();
					} else {
						alert(res.msg)
					}

				}
			});
		})

		function copyText() {
			$.ajax({
				type: "POST",
				url: "https://api.ddbyz.com/yy-api/yypc/djkxh/list",
				dataType: "json",
				contentType: "application/json",
				success: function(res) {
					var arr = res.data
					if (arr.length > 0) {
						for (var i = 0; i < arr.length; i++) {
							var phone = formatPhone(arr[i].mobile)
							var newLi = $('<div>' + arr[i].name + '&nbsp&nbsp&nbsp' + phone + '&nbsp&nbsp&nbsp' + arr[i].js +
								'</div>')
							$('.textr').append(newLi);
						}
					} else {
						var newLis = $('<div id="nullq">' + "暂无提交人员" + '</div>')
						$('.textr').append(newLis);
					}

				}
			});
		}

		function formatPhone(phone) {
			return phone.substr(0, 3) + '****' + phone.substr(7, 11);
		}



		$('#list').change(function(e) {
			$("#zs").val($("#list option:selected").val())
		})
		$('#listjs').change(function(e) {
			$("#js").val($("#listjs option:selected").val())
		})
	</script>
</html>
